<template>
  <div class="PickUp">
    <div class='title'>
      <span></span>
      <span>提货申请</span>
    </div>
    <div class='pickupbottom'>
      <div class="boxStyleadd">
        <div>申请交割人参数量/支：</div>
        <el-input-number v-model="num1" controls-position="right" @change="handleChange" :min="1" :max="1000"></el-input-number>
      </div>
      <!--<div class="boxStyleadd">
        <div>5～7g人参/支：</div>
        <el-input-number v-model="num2" controls-position="right" @change="handleChange" :min="0" :max="1000"></el-input-number>
      </div>
      <div class="boxStyleadd">
        <div>7～9g人参/支：</div>
        <el-input-number v-model="num3" controls-position="right" @change="handleChange" :min="0" :max="1000"></el-input-number>
      </div>
      <div class="boxStyleadd">
        <div>9～11g人参/支：</div>
        <el-input-number v-model="num4" controls-position="right" @change="handleChange" :min="0" :max="1000"></el-input-number>
      </div>
      <div class="boxStyle">
        <div>预计BPX数量：</div><input type="number" disabled :value='bpx'>
      </div>
      <div class="boxStyle">
        <div>预计重量：</div><input type="number" disabled :value='weight'>
      </div>-->
      <div class="boxStyle">
        <div>姓名：</div><input type="text" v-model="name" placeholder="请输入该收货人姓名">
      </div>
      <div class="boxStyle">
        <div>电话：</div><input type="text" v-model="phone" placeholder="请输入该收货人电话">
      </div>
      <!-- <div class="boxStyle">
        <div>选择账户：</div><input type="text" v-model="account">
      </div> -->
      <div class="boxStyle">
        <div>收货地址：</div><input type="text" placeholder="请输入该收货地址" v-model="address">
      </div>
      <div class="boxStyle">
        <div></div>
        <div>
          <p>
            <el-checkbox v-model="checked1" @change="changeone($event)">本人确认中国社区预留信息与币旺信息一致</el-checkbox>
          </p>
          <p>
            <el-checkbox v-model="checked2" @change="change($event)">阅读并同意《提参协议》</el-checkbox>
          </p>
          <p class="zhu">注：详尽说明请浏览中国社区公告“野山参实物交割”</p>
          <el-button class="colorStyle" type="warning" @click.native="onApplay">申请提货</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, InputNumber } from "element-ui";
export default {
  data() {
    return {
      count: "",
      name: "",
      phone: "",
      account: "",
      address: "",
      checked1: false,
      checked2: false,
      checkedone: false,
      checkedtwo: false,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0
    };
  },
  computed: {
    /*weight() {
      return this.comput();
    },*/
    /*bpx() {
      return parseInt(this.comput() / (localStorage.getItem('bpxhl') || (3 / 10)) * 100) / 100;
    }*/
  },
  methods: {
    comput() {
      let num = this.num1 * 5 + this.num2 * 6 + this.num3 * 8 + this.num4 * 10;
      return num;
    },
    changeone(e) {
      this.checkedone = e;
    },
    change(e) {
      this.checkedtwo = e;
    },
    onApplay() {
      let name = this.name.trim();
      let phone = this.phone.trim();
      // let account = this.account.trim();
      let address = this.address.trim();
      if (
        this.num1 <= 0 &&
        this.num2 <= 0 &&
        this.num3 <= 0 &&
        this.num1 <= 0
      ) {
          return Message({
          message: "输入错误请重新填写",
          type: "error"
        });
      }
      if (name === "" || phone === "" || address === "") {
        return Message({
          message: "输入错误请重新填写",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        Message({
          message: "电话号码不存在，请重新输入",
          type: "error"
        });
        return false;
      }
      if (!this.checkedtwo || !this.checkedone) {
        return Message({
          message: "请勾选下面确认信息",
          type: "error"
        });
      }
      u.getPickup(
        {
          fiveGinsengNum: this.num1,
          fiveSevenGinsengNum: this.num2,
          sevenNineGinsengNum: this.num3,
          nineElevenGinsengNum: this.num4,
          address: this.address,
          expertBPX: 0,
          name: this.name,
          phone: this.phone,
          exceptGinsengTotalWeight: 0
        },
        data => {
          if (data && data.code == "200") {
            Message({
              message: "申请成功",
              type: "success"
            });
            this.$router.push({ path: "/delivery" });
          } else {
            Message({
              message: data.message,
              type: "error"
            });
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.PickUp {
  height: 100%;
  background: white;
  overflow: hidden;
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .pickupbottom {
    overflow-y: auto;
    height: calc(100% - 50px);
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
  }
  .boxStyle {
    margin: 30px 0px 0px 30px;
    display: flex;
    height: 38px;
    line-height: 38px;

    div {
      // border: 1px solid #000;
      width: 180px;
      margin-bottom: 35px;
    }
    input {
      border: 1px solid #e6e9ed;
      width: 338px;
      padding-left: 10px;
    }
    .colorStyle {
      border: none;
      background-color: #ffb001;
      width: 115px;
      height: 38px;
      margin-bottom: 20px;
    }
  }
  .boxStyleadd {
    margin: 30px 0px 0px 30px;
    // display: flex;
    height: 38px;
    line-height: 38px;

    div {
      // border: 1px solid #000;
      width: 180px;
      margin-bottom: 35px;
      display: inline-block;
    }
    .colorStyle {
      border: none;
      background-color: #ffb001;
      width: 115px;
      height: 38px;
      margin-bottom: 20px;
    }
  }
  ::placeholder {
    color: #737373;
  }
  .zhu {
    display: inline-block;
    color: #737373;
    font-size: 14px;
    width: 400px;
    margin-bottom: 45px;
  }
}
</style>
<style>
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ffb001;
  border-color: #ffb001;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #737373;
}
.el-checkbox__inner {
  border-radius: 0px;
}
</style>
